<template>
  <div class="page-container">
    <!--面包屑导航--> 
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员引流</el-breadcrumb-item>
        <el-breadcrumb-item>会员引流</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--搜索条件+操作按钮栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
          <el-row class="times mr30">
            <el-form-item label="创建时间：" prop="startTime" class="times">
              <el-date-picker
                v-model="filters.startTime"
                @change="changeStartDate"
                :picker-options="startDateDisabled"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                class="input_postion"
                clearable
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间"
                class="input_postion"
                @change="changeEndDate"
                :picker-options="endDateDisabled"
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-form-item label="规则名称：" prop="drainageName">
            <el-input clearable v-model="filters.drainageName" placeholder="规则名称" maxlength="80"></el-input>
          </el-form-item>
          <el-form-item label="活动类型：" prop="drainageTypes">
            <el-select v-model="filters.drainageTypes" placeholder="全部" clearable>
              <el-option
                v-for="item in drainageTypesList"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--操作按钮-->
        <el-row  class="search-button">
          <el-form-item>
            <kt-button :label="$t('action.reset')" class="resetButton" icon="el-icon-refresh" @click="resetForm('filters')" />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              label="搜索"
              @click="handleCurrentChange(1)"
              class="searchButton"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              label="创建规则"
              @click="create"
              class="searchButton"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tab-container active2">
      <el-tabs type="card" v-model="active" @tab-click="tabClick">
        <el-tab-pane label="全部" name="全部">
        </el-tab-pane>
        <el-tab-pane label="待提交" name="待提交">
        </el-tab-pane>
        <el-tab-pane label="待审核" name="待审核">
        </el-tab-pane>
        <el-tab-pane label="审核通过" name="审核通过">
        </el-tab-pane>
        <el-tab-pane label="审核不通过" name="审核不通过">
        </el-tab-pane>
        <el-table
          :data="tableData"
          v-loading="loading"
          style="width: 100%">
          <el-table-column
            fixed
            prop="id"
            label="ID"
            align="center"
            v-if="false">
          </el-table-column>
          <el-table-column
            fixed
            prop="drainageCode"
            label="ID"
            align="center"
            width="300">
          </el-table-column>
          <el-table-column
            prop="drainageName"
            label="规则名称"
            align="center"
            width="350">
          </el-table-column>
          <el-table-column
            prop="drainageTypes"
            label="类型"
            align="center">
            <template slot-scope="scope">
              {{changeDrainageTypesList(scope.row.drainageTypes)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            align="center">
            <template slot-scope="scope">
              {{changeDrainageStatus(scope.row.status)}}
              <el-tooltip class="item" effect="dark" :content="scope.row.refuseDesc" placement="right-start">
                <span v-if="scope.row.status == 4" class="el-icon-warning"></span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="creatorName"
            label="创建人"
            align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="450">
            <template slot-scope="scope">
              <el-button type="text" size="small" v-if="scope.row.status == 1 || scope.row.status == 4" @click="showSubmitAuditDialog(scope.row.id)">提交审核</el-button>
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small" v-if="scope.row.status == 1 || scope.row.status == 4" @click="showEditDialog(scope.row)">编辑</el-button>
              <el-button type="text" size="small" v-if="scope.row.status == 1 || scope.row.status == 4" @click="showDeleteDialog(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  // import tabPane from "../../PromotionManagement/components/TabPanePresell";
  import KtButton from "@/views/Core/KtButton";

  export default {
    name: "DrainageAudit",
    components: {
      // tabPane,
      KtButton
    },
    data() {
      return{
        active:"全部",
        filters:{
          statusList: [],
          deptName: null,
          drainageName: null,
          drainageTypes: null,
          channelCodes: null,
          startTime: null,
          endTime: null,
          start: 1,
          limit: 10,
        },
        auditForm: {
          id: null,
          status: null,
          refuseDesc: null,
        },
        auditFormRules: {
          refuseDesc: [
            { required: true, message: "请填写审核意见", trigger: "blur" }
          ]
        },
        size: "small",
        drainageTypesList:[
          {type:1,name:"发短信"},
          {type:2,name:"发邮件"},
          {type:3,name:"H5入驻"}
        ],
        tableData: [],
        showSubmitAuditButtonDialog: false,
        showEditButtonDialog: false,
        showDeleteButtonDialog: false,

        editDialogVisible: false,
        showRefuseDescSpan: false,
        totalCount: 10,

        startDateDisabled: {},//开始时间限制
        endDateDisabled: {},//结束时间限制
      }
    },
    methods:{
      create(){
        this.$router.push(`/MemDrainageCreate/0`)
      },
      changeStartDate: function() {
        var this_ = this;
        this_.endDateDisabled = {
          disabledDate: time => {
            if (this_.filters.startTime) {
                    return time.getTime() <= new Date(this_.filters.startTime).getTime();
            }
          }
        };
      },
      changeEndDate: function() {
        var this_ = this;
        this_.startDateDisabled = {
          disabledDate: time => {
            if (this_.filters.endTime) {
              return time.getTime() >= new Date(this_.filters.endTime).getTime();
            }
          }
        };
      },
      showEditDialog(row){
        this.$router.push(`/MemDrainageCreate/${row.id}`)
      },
      handleClick(row){
        this.$router.push(`/MemDrainfeDetail/${row.id}`)
      },
      tabClick(tab,event){
        this.filters.statusList = [];
        if(tab.name == '全部'){
        }else if(tab.name == '待提交'){
          this.filters.statusList.push(1);
          this.showSubmitAuditButtonDialog = true;
          this.showEditButtonDialog = true;
          this.showDeleteButtonDialog = true;
        }else if(tab.name == '待审核'){
          this.filters.statusList.push(2);
          this.showSubmitAuditButtonDialog = false;
          this.showEditButtonDialog = false;
          this.showDeleteButtonDialog = false;
        }else if(tab.name == '审核通过'){
          this.filters.statusList.push(3);
          this.showSubmitAuditButtonDialog = false;
          this.showEditButtonDialog = false;
          this.showDeleteButtonDialog = false;
        }else if(tab.name == '审核不通过'){
          this.filters.statusList.push(4);
          this.showSubmitAuditButtonDialog = true;
          this.showEditButtonDialog = true;
          this.showDeleteButtonDialog = true;
        }
        this.handleCurrentChange(1);
      },
      resetForm(formName) {
        //需要校验的keys
        let keys = ["drainageTypes","drainageName","endTime","startTime"]
        //调用校验
        let  boo = this.seachTableUtils.checkFromIsNull(this.filters,keys)
        if(!boo){
          return;
        }
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.handleCurrentChange(1);
        }
      },
      // 分页查询
      getDrainageList() {
        this.utils.request.queryPageDrainage(this.filters, res => {
          if(res.code == '0000'){
            // if (res.data == null || (res.data.rows != null && res.data.rows.length < 1)){
            //   this.$message({"type":"warning",message:"查询暂无数据"})
            // }
            this.totalCount = res.data.total;
            this.tableData = res.data.rows;
          }else {

          }
        });
      },

      showRefuseDesc(row){
        this.showRefuseDescSpan = true;
      },

      closeRefuseDesc(){
        this.showRefuseDescSpan = false;
      },

      handleSizeChange(pageSize) {
        this.filters.limit = pageSize;
        this.handleCurrentChange(1);
      },
      handleCurrentChange(pageNo) {
        this.filters.start = pageNo;
        this.getDrainageList();
      },

      // 审核
      showSubmitAuditDialog(id) {
        // this.submitAuditDialogVisible = true;
        this.$confirm("您确定要提交审核？", "提示", {
          type: "warning",
          closeOnClickModal: false,
        }).then(() => {
          this.auditForm.id = id;
          this.auditForm.status = 2;
          this.utils.request.updateDrainage(this.auditForm, res => {
            if (res.code == '0000') {
              this.$message({message: "提交成功", type: "success"});
              this.handleCurrentChange(1);
            } else {
              this.$message({message: "提交失败, " + res.msg, type: "error"});
            }
          });
        })
      },

      // 编辑
      // showEditDialog(id) {
      //   this.editDialogVisible = true;
      //   this.auditForm.id = id;
      // },

      // 删除
      showDeleteDialog(id) {
        this.$confirm("您确定要删除该规则？", "提示", {
          type: "warning",
          closeOnClickModal: false,
        }).then(() => {
          this.auditForm.id = id;
          this.utils.request.deleteDrainage(this.auditForm, res => {
            if (res.code == '0000') {
              this.$message({message: "提交成功", type: "success"});
              this.handleCurrentChange(1);
            } else {
              this.$message({message: "提交失败, " + res.msg, type: "error"});
            }
          });
        })
      },

      changeDrainageTypesList(value){
        let str = "";
        ("" + value).split(",").forEach(val=>{
          if(str == ""){
            str = str + this.changeDrainageTypes(val);
          }else {
            str = str + "、" + this.changeDrainageTypes(val);
          }
        });
        return str;
      },
      changeDrainageTypes(val){
        if(val == 1){
          return "发短信";
        }
        else if (val == 2){
          return "发邮件";
        }
        else if (val == 3){
          return "H5入驻";
        }
        return "";
      },
      changeDrainageStatus(val){
        if(val == 1){
          return "待提交";
        }
        else if (val == 2){
          return "待审核";
        }
        else if (val == 3){
          return "审核通过";
        }
        else if (val == 4){
          return "审核不通过";
        }
        return "";
      }

    },
    created() {
      this.handleCurrentChange(1);
    }
  }

</script>

<style lang="scss" scoped>
  /deep/ .el-pagination{
    text-align: right;
  }

</style>
